<style>

</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
       <div class="order-detail-topbar clearfix">
           <div class="pull-left">
               <span class="order-name m-r5">Auchan (China) investment Co. Ltd</span>
               <span class="order-id color-gray">ID:113334</span>
               <span class="order-id color-gray m-r5">XID:3423423</span>
               <span class="layui-btn layui-btn-xs layui-bg-red m-r5">已签约</span>
               <a href="javascript:history.go(-1);" class="go-back"><i class="fa fa-angle-double-left"></i></a>
           </div>
           <div class="pull-right">
               <button type="button" class="layui-btn layui-btn-xs layui-btn-primary"><i class="fa fa-link"></i> 别名</button>
               <button type="button" class="layui-btn layui-btn-xs layui-btn-primary"><i class="fa fa-star-o"></i> 关注</button>
               <button type="button" class="layui-btn layui-btn-xs layui-btn-primary"><i class="fa fa-search"></i> 企查看</button>
               <button type="button" class="layui-btn layui-btn-xs layui-btn-primary"><i class="fa fa-tag"></i> 新增订单</button>
               <button type="button" class="layui-btn layui-btn-xs layui-btn-primary"><i class="fa fa-pencil"></i> 编辑</button>
               <button type="button" class="layui-btn layui-btn-xs layui-btn-primary"><i class="fa fa-comments"></i> 备注</button>
               <button type="button" class="layui-btn layui-btn-xs layui-btn-primary"><i class="fa fa-paperclip"></i> 附件</button>
               <button type="button" class="layui-btn layui-btn-xs layui-btn-primary"><i class="fa fa-th-large"></i> 更多</button>
           </div>
       </div>
        <div class="layui-tab layui-tab-card order-detail-tab" lay-filter="test1">
            <ul class="layui-tab-title">
                <li class="layui-this">详情</li>
                <li>9 联系人</li>
                <li>组织架构</li>
                <li>0 简历地图</li>
                <li>0 List</li>
                <li>0 订单列表</li>
                <li>0 推荐</li>
                <li>0 合同</li>
                <li>0 发票列表</li>
                <li>0 提醒</li>
                <li>0 备注</li>
                <li>正在招聘的岗位</li>
                <li>0 账单地址</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-card">
                        <div class="layui-card-header">基本信息</div>
                        <div class="layui-card-body">
                            <div class="layui-row">
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">公司全称：</div>
                                        <div class="info">欧尚（中国）投资有限公司</div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">薪资架构：</div>
                                        <div class="info"></div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">行业：</div>
                                        <div class="info"></div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">行业：</div>
                                        <div class="info"></div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">行业：</div>
                                        <div class="info"></div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">行业：</div>
                                        <div class="info"></div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">行业：</div>
                                        <div class="info"></div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">公司同行竞争对手：</div>
                                        <div class="info"></div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">公司全称：</div>
                                        <div class="info">欧尚（中国）投资有限公司</div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">薪资架构：</div>
                                        <div class="info"></div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">行业：</div>
                                        <div class="info"></div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">行业：</div>
                                        <div class="info"></div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">行业：</div>
                                        <div class="info"></div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">行业：</div>
                                        <div class="info"></div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">行业：</div>
                                        <div class="info"></div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">公司同行竞争对手：</div>
                                        <div class="info"></div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">行业：</div>
                                        <div class="info"></div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-basic-item">
                                        <div class="label">公司同行竞争对手：</div>
                                        <div class="info"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header">客户简介</div>
                        <div class="layui-card-body">客户简介客户简介客户简介客户简介客户简介客户简介客户简介客户简介客户简介客户简介客户简介客户简介客户简介</div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="order-candidate-bar clearfix">
                        <div class="pull-left">
                            <button type="button" class="layui-btn layui-btn-xs layui-btn-primary">新增候选人</button>
                            <button type="button" class="layui-btn layui-btn-xs layui-btn-primary layui-btn-disabled">批量操作</button>
                            <button type="button" class="layui-btn layui-btn-xs layui-btn-primary layui-btn-disabled"><i class="fa fa-th-large"></i> 更多功能</button>
                            <button type="button" class="layui-btn layui-btn-xs layui-btn-primary layui-btn-disabled">背景色</button>
                            <button type="button" class="layui-btn layui-btn-xs layui-btn-primary"><i class="fa fa-refresh"></i></button>
                        </div>
                        <div class="pull-right">
                            <select name="interest" class="select-ignore" lay-filter="" lay-ignore>
                                <option value="0">所有简历</option>
                                <option value="1">阅读</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-tab layui-tab-card order-detail-tab">
                        <div class="order-search-bar">
                            <i class="fa fa-search m-r5"></i>
                            <div class="layui-input-inline">
                                <input type="text" name="name" placeholder="" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <ul class="layui-tab-title">
                            <li class="layui-this">2 所有简历</li>
                            <li>0 已加入未被推荐</li>
                            <li>1 已推荐未面试</li>
                            <li>0 客户面试</li>
                            <li>0 录用（Offerd）</li>
                            <li>1 淘汰</li>
                            <li>1 活动中简历</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter" lay-skin="line"></table>
                            </div>
                            <div class="layui-tab-item">2</div>
                            <div class="layui-tab-item">3</div>
                            <div class="layui-tab-item">4</div>
                            <div class="layui-tab-item">5</div>
                            <div class="layui-tab-item">6</div>
                            <div class="layui-tab-item">7</div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">3</div>
                <div class="layui-tab-item">4</div>
                <div class="layui-tab-item">5</div>
                <div class="layui-tab-item">6</div>
                <div class="layui-tab-item">7</div>
                <div class="layui-tab-item">8</div>
                <div class="layui-tab-item">9</div>
                <div class="layui-tab-item">10</div>
                <div class="layui-tab-item">11</div>
                <div class="layui-tab-item">12</div>
                <div class="layui-tab-item">13</div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="statusTableBar">
    {{#  if(d.candidateStatus == 0){ }}
    <button class="layui-btn layui-btn-xs layui-bg-black">客户淘汰</button>
    {{#  } }}
    {{#  if(d.candidateStatus == 1){ }}
    <button class="layui-btn layui-btn-xs">推荐给客户</button>
    {{#  } }}
</script>
<script>
    layui.use(['layer','form', 'table','miniPage','element'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage,
            element = layui.element;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        /**
         * 数据快速查看
         **/
        table.render({
            elem: '#currentTableId',
            url: 'api/table1.json',
            skin: 'line',
            id: 'idTest',
            cols: [[
                {type:'checkbox', fixed: 'left'},
                {field: 'name', align:'center', title: '姓名', minWidth: 200 , templet: function(d){
                    return '<span style="margin-right: 10px;"><i class="fa fa-paperclip"></i> 0</span> ' +
                        '<span style="margin-right: 20px;"><i class="fa fa-comment-o"></i> 0</span>' +
                        '<a>'+ d.name +' <i class="fa fa-share-square-o color-blue"></i></a>'
                }},
                {field: 'company', minWidth: 150, title: '公司', templet: function(d){
                    return '<span class="color-blue">'+ d.company +'</span>'
                }},
                {field: 'job', title: '职位', minWidth: 120},
                {field: 'pay', title: '年薪', minWidth: 80, templet: function(d){
                    return '<span class="color-blue">'+ d.pay +'</span>'
                }},
                {field: 'age', align:'center', Width: 60, title: '年龄'},
                {title: '标签', Width: 60, templet: function(d){
                    return '<a href="javascript:;" class="color-blue">查看</a>'
                }},
                {field: 'candidateStatus', minWidth: 100, title: '订单候选人状态', templet: '#statusTableBar'},
                {align: 'center', Width: 60, title: '手机', templet: function(d){
                    return '<a href="javascript:;" class="color-blue">查看</a>'
                }},
                {align: 'center', Width: 60, title: '邮箱', templet: function(d){
                    return '<a href="javascript:;" class="color-blue">查看</a>'
                }},
                {field: 'record', align:'center', minWidth: 120, title: '最近联系记录'},
                {field: 'operationTime', minWidth: 80, title: '操作时间'},
                {field: 'username', minWidth: 200, title: '用户'},
                {title: '操作', Width: 60, fixed: "right", align: "center", templet: function(d){
                    return '<button class="layui-btn layui-btn-xs layui-btn-primary"><i class="fa fa-align-justify"></i></span>';
                }}
            ]],
            page: true
        });

        element.on('tab(test1)', function(){
            table.resize();
        });

    });
</script>